<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <link rel="shortcut icon" href="images/favicon.ico" type="iamge/x-icon">
</head>
<body>
    <!-- 头部导航条 -->
    <div class="nav-head">
        <div class="put-center">
            <div class="nav-left">
                <ul>
                    <li><a href="#">小米网</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">MIUI</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">米聊</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">游戏</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">多看阅读</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">云服务</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">小米移动版</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">Select region</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">米粉节答疑</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <ul>
                    <li><a href="#">注册</a></li>
                    <span class="sep">|</span>
                    <li><a href="#">登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部导航条ending -->

    <!-- 整个处于中间的部分 -->
    <div class="main-part">
        <div class="logo-part">
            <img src="images/logo.png" alt="小米图标">
            <div class="logo-right">
                <div class="time">
                    <img src="images/clock.png" alt="时钟">
                    <p>4月14日开放购买</p>
                </div>
                <div class="search-shopcar">
                    <input type="search" placeholder="搜索您需要的商品">
                    <div class="character">
                        <span><a href="#">小米手机</a></span>
                        <span><a href="#">耳机音响</a></span>
                        <span><a href="#">保护壳</a></span>
                    </div>
                    <button class="fangdajing"><img src="images/fangdajing.png"></button>
                    <div class="shopcar">
                        <img src="images/shopcar.png" alt="购物车">
                        <button>购物车</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="all-items">
            <div class="all-nav">
                <span>全部商品</span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">小米平板</a></li>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">盒子</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">合约机</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="all-nav-left">
                <ul>
                    <li><a href="#"><span>购买手机</span></br>小米Noto 小米4 红米 红米Not</a></li>
                    <li><a href="#"><span>购买电视与平板</span></br>小米电视  小米盒子 小米平板</a></li>
                    <li><a href="#"><span>路由器与智能硬件</span></br>路由器 体重秤 净化器与滤芯</a></li>
                    <li><a href="#"><span>插线板、移动电源与电池</span></br>小米移动电源 电池 充电器</a></li>
                    <li><a href="#"><span>耳机音箱与存储卡</span></br>小米头戴式耳机  小米活塞耳机</a></li>
                    <li><a href="#"><span>保护套与贴膜</span></br>保护套/保护壳 贴膜 防尘塞</a></li>
                    <li><a href="#"><span>后盖与个性化配件</span></br>米键 后盖 贴纸 手机支架</a></li>
                    <li><a href="#"><span>小米生活方式</span></br>服装 米兔 背包 生活周边</a></li>
                </ul>
            </div>
            <div class="all-show">
                <div class="big-banner">
                    <div class="content">
                        <div id="list">
                            <img src="images/banner5.png" alt="">
                            <img src="images/banner4.png" alt="">
                            <img src="images/banner3.png" alt="">
                            <img src="images/banner2.png" alt="">
                            <img src="images/banner1.png" alt="">
                        </div>
                        <button id="prev"></button>
                        <button id="next"></button>
                        <div id="btns" class="changewhite">
                            <span class="current">1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                        </div>
                    </div>
                </div>
                <div class="small-banner">
                    <img src="images/01.png" alt="">
                    <img src="images/02.png" alt="">
                    <img src="images/03.png" alt="">
                </div>
            </div>
        </div>
        <div class="start-piece">
            <span class="xiaomi-star">小米明星单品</span>
            <span class="pick-piece">根据机型选配件</span>
            <div class="up-down">
                <a href="#"><img src="images/05.png" alt="" class="left"></a>
                <a href="#"><img src="images/06.png" alt=""></a>
            </div>
            <div class="piece-row">
                <div class="one">
                    <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                    <span class="oneword">小米智能插座</span><br>
                    <span class="twoword">让普通家电变得智能</span>
                </div>
                <div class="one">
                    <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                    <span class="oneword">小米空气净化器</span><br>
                    <span class="twoword">高性能空气净化器立即预约</span>
                </div>
                <div class="one">
                    <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
                    <span class="oneword">小米活塞耳机简装版</span><br>
                    <span class="twoword">好声音源自于活塞式音腔，延续经典设计</span>
                </div>
                <div class="one">
                    <img src="images/aa.jpg" alt="">
                    <span class="oneword">小米路由器</span><br>
                    <span class="twoword">&nbsp;顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
                </div>
            </div>
        </div>
        <div class="new-items">
            <span class="new-item-word">新品上市</span>
            <span class="more">更多></span>
            <div class="newgoods-show">
                <div class="new-left">
                    <div class="line one">
                        <div class="yinxiang">
                            <img src="images/fanghezi0407xiao.jpg" alt="">
                        </div>
                        <div class="loop">
                            <div class="characterpart">
                                <span class="title">小米手环</span><br>
                                <span class="appendix">79元</span>
                            </div>
                            <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                    </div>
                    <div class="line two">
                        <div class="doublepart">
                            <div class="fist-part">
                                <span class="title">五周年米兔钥匙扣</span><br>
                                <span class="appendix">9.9元</span>
                                <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
                            </div>
                            <div class="second-part">
                                <span class="title">QCY派Q8蓝牙耳机</span> <br>
                                <span class="appendix">59.9元</span>
                                <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                            </div>
                        </div>
                        <div class="T-shirt">
                            <div class="characterpart">
                                <span class="title">小米T恤路标MILOGO</span><br>
                                <span class="appendix">39元</span>
                            </div>
                            <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                        <div class="xiaomi4">
                            <div class="characterpart">
                                <span class="title">小米4实木后盖</span><br>
                                <span class="appendix">69元</span>
                            </div>
                            <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                    </div>
                    <div class="line three">
                        <div class="xiaomiNote">
                            <div class="characterpart">
                                <span class="title">小米Note超薄保护壳</span><br>
                                <span class="appendix">49元</span>
                            </div>
                            <img src="images/baohuke.png" alt="">
                        </div>
                        <div class="selfpicture">
                            <div class="characterpart">
                                <span class="title">小米自拍杆</span><br>
                                <span class="appendix">49元</span>
                            </div>
                            <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                        </div>
                        <div class="earphonr">
                            <div class="characterpart">
                                <span class="title">先锋CL31系列儿式耳机</span><br>
                                <span class="appendix">99元</span>
                            </div>
                            <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="new-right">
                    <div class="float-logo"><span>特价商品</span></div>
                    <div class="onsale  differ">
                        <div class="describe">
                            <span class="cc-card">SanDisk32G存储卡</span><br>
                            <span style="color: red;">79元</span>
                            <span style="text-decoration: line-through;">109元</span><br>
                            <span>还有更多特价商品</span>
                        </div>
                        <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                    </div>
                    <div class="onsale cheap">
                        <div class="describe2">
                            <span class="cc-card">特惠配件套餐</span><br>
                            <span>手机必备配件组合购买</span><br>
                            <span>实惠更优惠</span>
                        </div>
                        <img src="images/channel-list-cool.jpg" alt="">
                    </div>
                    <div class="onsale cheap test-margin">
                        <div class="describe2">
                            <span class="cc-card">我爱酷玩</span><br>
                            <span>邂逅炫酷的电子产品</span><br>
                            <span>结交趣味相投的朋友</span>
                        </div>
                        <img src="images/channel-list-new.jpg" alt="">
                    </div>
                    <div class="changeway">
                        <ul>
                            <li><a href="#">企业用户采购通道</a><span>></span></li>
                            <li><a href="#">小米手机方位查询</a><span>></span></li>
                            <li><a href="#">小米手机官翻版</a><span>></span></li>
                            <li><a href="#">小米路由器官翻版</a><span>></span></li>
                            <li><a href="#">米粉红包</a><span>></span></li>
                        </ul>
                    </div>
                    <div class="phonefee">
                        <span class="bigger">话费充值</span><br>
                        <input type="text" placeholder="请输入手机号"><br>
                        <select id="prices">
                            <option value="100元" defualt="">100元</option>
                            <option value="50元">50元</option>
                            <option value="30元">30元</option>
                            <option value="20元">20元</option>
                        </select><br>
                        <span >实付价格98.4元起</span><br>
                        <button>立即充值</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 整个处于中间的部分ending -->
    <div class="ending">
        <div class="ending-center">
            <div class="service">
                <div class="logo-one">
                    <img src="images/10.png" alt=""><br>
                    <span><a href="#">1小时快修服务</a></span>
                </div>
                <div class="logo-one">
                    <img src="images/11.png" alt=""><br>
                    <span><a href="#">7天无条件退换</a></span>
                </div>
                <div class="logo-one">
                    <img src="images/12.png" alt=""><br>
                    <span><a href="#">15天免费换货</a></span>
                </div>
                <div class="logo-one">
                    <img src="images/13.png" alt=""><br>
                    <span><a href="#">满150元包邮</a></span>
                </div>
                <div class="logo-one">
                    <img src="images/14.png" alt=""><br>
                    <span><a href="#">520余家售后网点</a></span>
                </div>
            </div>
            <div class="about">
                <div class="helpcenter inform">
                    <span class="title"><a href="#">帮助中心</a></span>
                    <ul>
                        <li><a href="#">购买指南</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">配送方式</a></li>
                    </ul>
                </div>
                <div class="support inform">
                    <span class="title"><a href="#">服务支持</a></span>
                    <ul>
                        <li><a href="#">售后政策</a></li>
                        <li><a href="#">自助服务</a></li>
                        <li><a href="#">相关下载</a></li>
                    </ul>
                </div>
                <div class="homexm inform">
                    <span class="title"><a href="#">小米之家</a></span>
                    <ul>
                        <li><a href="#">小米之家</a></li>
                        <li><a href="#">服务网店</a></li>
                        <li><a href="#">预约亲临到店服务</a></li>
                    </ul>
                </div>
                <div class="aboutxm inform">
                    <span class="title"><a href="#">关于小米</a></span>
                    <ul>
                        <li><a href="#">了解小米</a></li>
                        <li><a href="#">加入小米</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
                <div class="aboutus inform">
                    <span class="title"><a href="#">关于我们</a></span>
                    <ul>
                        <li><a href="#">新浪微博</a></li>
                        <li><a href="#">小米部落</a></li>
                        <li><a href="#">官方微信</a></li>
                    </ul>
                </div>
                <div class="tel">
                    <span class="number">400-100-5678</span><br>
                    <span class="day">周一至8:00-18:00周日</span><br>
                    <span class="day">（仅收市话费）</span><br>
                    <button>24小时在线服务</button>
                </div>
            </div>
            <div class="ending-footer">
                <div class="ending-footer-center">
                    <span>小米旗下网店：</span>
                    <ul>
                        <li><a href="#">小米网</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">MIUI</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">米聊</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">多看书城</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">小米路由器</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">繁体香港</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">繁体台湾</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">English</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">小米后院</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">小米天猫店</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">小米淘宝直营店</a></li>
                        <span class="sep">|</span>
                        <li><a href="#">小米网盟</a></li>
                    </ul>
                </div>
                <span class="copyright">©mi.com &nbsp;京ICP证110507号 &nbsp;京ICP备10046444号 &nbsp;京公网安备1101080212535号 京网文[2014]0059-0009号</span><br>
                <div class="language-logo">
                    <img src="images/16.png" alt="">
                    <select >
                        <option value="简体中文">简体中文</option>
                        <option value="English">English</option>
                        <option value="繁体中文">繁体中文</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</body>
</html>